.collaborative-right-page {
  box-sizing: border-box;
  font-family: 'YouSheBiaoTiHei', 'AzonixRegular', 'SourceHanSansSC', 'DINAlternate', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  .top-wrap{
    height: 261px;
    width: 100%;
    margin-bottom: 20px;
  }
  .middle-wrap{
    height: 307px;
    width: 100%;
    margin-bottom: 20px;
  }
  .bottom-wrap{
    height: 472px;
    width: 100%;
  }
  .content-wrap{
    height: calc(100% - 62px);
    width: calc(100% - 10px);
    background: linear-gradient( 180deg, rgba(20,25,31,0.6) 0%, rgba(60,66,73,0.6) 100%), linear-gradient( 178deg, rgba(9,11,13,0) 0%, #26394D 100%), radial-gradient( 185% 43% at 53% -3%, rgba(166,213,255,0.5) 0%, rgba(166,209,255,0) 24%, rgba(179,212,255,0) 100%);
    border: 1px solid rgba(77,89,102,0.25);
    border-radius: 4px;
    padding: 15px;
    box-sizing: border-box;
    .item-area{
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      .content-item{
        width: calc(100% / 3);
        height: calc(100% / 3);
        padding: 15px;
        box-sizing: border-box;
        font-family: 'SourceHanSansSC';
        display: flex;
        align-items: center;
        justify-content: start;
        .item-left{
          color: rgba(255,255,255,0.8);
          font-size: 14px;
          .left-str{
            color: #43AAFF;
          }
        }

      }
    }
    .data-wrap{
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 5px 0 10px;
      font-family: SourceHanSansSC, SourceHanSansSC;
      .data-item{
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        .data-left{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          color: rgba(255,255,255,1);
        }
        .value-bg{
          width: 80px;
          margin-left: 15px;
          font-family: 'DINAlternate';
          font-weight: bold;
          font-size: 24px;
          background: linear-gradient( 90deg, rgba(52,165,255,0) 0%, rgba(52,165,255,0.29) 33%, rgba(52,165,255,0.39) 45%, rgba(52,165,255,0.29) 91%, rgba(0,139,255,0) 100%);
          position: relative;
          .value{
            justify-content: center;
          }
        }
      }

    }
    .content-content{
      margin-top: -5px;
      box-sizing: border-box;
      .content-item{
        .modules-data-wrap{
          display: flex;
          font-family: SourceHanSansSC, SourceHanSansSC;
          font-size: 16px;
          color: #FFFFFF;
          justify-content: space-between;
          padding: 10px 10px 5px;
          box-sizing: border-box;
          flex-wrap: wrap;
          .transverse-data-item, .vertical-data-item{
            display: flex;
            align-items: center;
            margin-bottom: 7px;
          }
          .vertical-data-item{
            flex-direction: column;
            justify-content: center;
            .value-bg{
              font-size: 24px;
              background: none!important;
              display: flex;
              .value{
                align-items: end;
              }
            }
          }
          .transverse-data-item{
            justify-content: start;
            align-items: center;
            padding-right: 10px;
            padding-bottom: 10px;
            box-sizing: border-box;
            .value-bg{
              flex: 1;
              height: 26px;
              line-height: 26px;
              .value{
                margin-left: 0!important;
                align-items: center;
              }
            }

          }
        }

        .item-left{
          color: rgba(255,255,255,0.8);
          font-size: 11px;
          .left-str{
            color: #43AAFF;
          }
        }
      }
    }
    .value-bg{
      width: 80px;
      margin-left: 15px;
      font-family: 'DINAlternate';
      font-weight: bold;
      font-size: 24px;
      background: linear-gradient( 90deg, rgba(52,165,255,0) 0%, rgba(52,165,255,0.29) 20%, rgba(52,165,255,0.39) 45%, rgba(52,165,255,0.29) 70%, rgba(0,139,255,0) 100%);
      position: relative;
    }
    .value{
      margin-left: 15px;
      font-family: 'DINAlternate';
      font-weight: bold;
      font-size: 24px;
      background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 3%, #81C6FF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .bottom-line{
    border: 2px solid;
    border-image: linear-gradient(225deg, rgba(117, 170, 202, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(117, 170, 202, 0)) 2 2;
  }
  @media screen and (max-width: 1920px) {
    transform: scale(0.4862); // 1920/3952 ≈ 0.4862
    transform-origin: top left;
  }
  @media screen and (max-width: 1080px) {
    transform: scale(0.2733); // 1080/3952 ≈ 0.2733
    transform-origin: top left;
  }

  @media screen and (min-width: 5120px) {
    transform: scale(1.7778); // 5120/3952 ≈ 1.2955
    transform-origin: top left;
  }
}
